<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 背景附着     
        background-attachment
        作用:设置的背景图片是否要随页面或者盒子的滚动而滚动
        属性值：
            1.scroll 滚动的,表示背景图片与盒子保持相对位置不变,随着页面的滚动而滚走
            2.fixed  固定的 背景图的定位的参考点从盒子的border以内的左上角顶点变为了浏览器的左上角定点,不滚动*/
    body {
        background-image: url("/Users/zhangtong/Desktop/同路人/dragon/work/coder.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;

    }

    .test {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-image: url("小黑.jpg");
        background-position: center center;
        margin-bottom: 10px;
    }
</style>

<body>

    <div class="test">


    </div>
    <div class="test">


    </div>
    <div class="test">


    </div>
    <div class="test">


    </div>
    <div class="test">


    </div>
    <div class="test">


    </div>

</body>

</html>